<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-slide1">Slide 1</div>
			<div class="swiper-slide swiper-slide2">Slide 2</div>
			<div class="swiper-slide swiper-slide3">Slide 3</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</template>

<script>
	import Swiper from 'swiper'; // 注意引入的是Swiper
	import 'swiper/css/swiper.min.css' // 注意这里的引入

	export default {
		name: 'HelloWorld',
		data() {
			return {
				// swiper实例  实例上有各种方法
				swiperInstance: null
			}
		},
		mounted() {
			var swiperInstance = new Swiper('.swiper-container', {
				loop: true, // 无缝
				autoplay: { //自动开始
					delay: 3000, //时间间隔
					disableOnInteraction: false, //*手动操作轮播图后不会暂停*
				},
				paginationClickable: true,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
				observer: true,
				observeParents: true,
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
					clickable: true, // 分页器可以点击
				},
			})
		}
	}
</script>
<style scoped>
</style>